<template>
  <el-container>
    <!-- 头部 -->
    <el-header height=100px>
      <el-row :gutter="20" type="flex" align="middle" justify="center" >

        <el-col :span="8"  style="width: 60%;">
            <p><h1 style="color: #795DA3;">浙师大幼儿园小黄莺艺术学校</h1></p>
        </el-col>
        <el-col :span="12">
          <div class="titleMeun">
            <el-menu :default-active="activePath" class="el-menu-demo" mode="horizontal"  router>
              <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id" @click="saveNavState(item.path)">
              <span>{{item.authName}}</span></el-menu-item>
            </el-menu>
            <div class="english" style="color: rgb(20,94,11); position: absolute; top: 3px; right: 3px;"><el-button @click="toLogin()">登录</el-button></div>
          </div>
        </el-col>
      </el-row>


    </el-header>
    <!-- 主体部分 -->
    <el-main>
      <router-view></router-view>
    </el-main>


    <!-- 尾部 -->
    <el-footer   height=400px v-if="!isIndex">
      <div style="margin: 70px 120px;" >
        <!-- 控制尾部的字 -->
        <div>
          <p>
            <span style="font-size: 28px;">浙师大幼儿园小黄莺艺术学校</span>
          </p>
          <p>
            <span style="font-size: 14px;">一切为了学生 为了一切学生 为了学生一切</span>
          </p>
        </div>
        <!-- 地址、电话、邮箱 -->
        <div class="footerInfo">
          <!-- 地址 -->
            <div class="addressIcon">
              <p >
                <span>地址：</span>
              </p>
              <p>
                <span>xxxxxxxx</span>
              </p>
            </div>

            <!-- 电话 -->
            <div class="telIcon2">
              <p>
                <span>电话：</span>
              </p>
              <p>
                <span>xxxx-xxxxxxxx</span>
              </p>
            </div>

            <!-- 邮箱 -->
            <div class="emailIcon">
              <p>
                <span>邮箱：</span>
              </p>
              <p>
                <span>xxxxxxx@126.COM</span>
              </p>
            </div>
        </div>
        <!-- 分割线 -->
        <div></div>
        <!-- 最后一些信息 -->
        <div></div>
      </div>



    </el-footer>


  </el-container>






</template>

<script>
  export default {
    data() {
      return {
        activePath:'',
        isIndex:false,
        drawer: false,
        direction: 'ttb',
        menuList: [
          {
            id:1,
            authName: '首页',
            path: '/index'
          },
          {
            id:2,
            authName: '学校介绍',
            path: '/info'
          },
          {
            id:3,
            authName: '师资介绍',
            path: '/introucted'
          },
          {
            id:4,
            authName: '优秀作品',
            path: '/shopping'
          },
          {
            id:5,
            authName: '招生简章',
            path: '/resources'
          },
          {
            id:6,
            authName: '新闻中心',
            path: '/news'
          },
          {
            id:8,
            authName: '合作单位&联系我们',
            path: '/contact'
          },

        ]
      }
    },
    created() {
      console.log("2")
      this.activePath = window.sessionStorage.getItem('activePath')
      if(this.activePath==null||this.activePath=='/index'){
        this.activePath = '/index'
        this.isIndex = true
        console.log(this.isIndex+"2")
      }
      this.activePath = this.$route.query.activePath;
    },
    methods:{
      // 保存链接的激活状态
      saveNavState(activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
        if(this.activePath=='/index'){
          this.activePath = '/index'
          this.isIndex = true
          console.log(this.isIndex)
        }else{
          this.isIndex = false
          console.log(this.isIndex)
        }

      },
      toLogin(){
        this.$router.push({path:'/login'});
      }
    }
  }
</script>

<style>


  .el-header {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
  }


  .el-header .el-row {
    width: 100%;
    height: 100%;
    /* background: #303133; */
  }

  .el-header .el-col {
    width: 100%;
    border-radius: 4px;
  }
  .titleImg{

  }
  .el-row .el-col .titleMeun{
    width: 100%;
    /* background: #409EFF; */
  }

  .el-row .el-col .titleMeun .el-menu{
    width: 100%;
    /* background: #409EFF; */
  }


  .el-row .el-col .titleMeun .telIcon1 {
    text-align: right;
    height: 30px;
    width: 5%;
    right: 130px;
    top: 9px;
    size: 20px;

    color: #E6A23C;
    line-height: 30px;
    /* background: #303133; */
    position: absolute;

  }


  .el-main{
    width: 100%;
    height: 100%;
    padding: 0px;
  }

  .el-footer {

    background-color: #666666;
    color: #88C49C;

  }
  .el-footer .footerInfo{
    height: 50px;
    margin-top: 60px;
    font-size: 14px;
  }
  .el-footer .footerInfo p{
      width: 300px;
      margin-left: 60px;
  }

  .el-footer .addressIcon{
    background: url(../../assets/addressIcon.png) 45px no-repeat;
    height: 49px;
    width: 400px;
    background-position: 0 0;
  }
  .el-footer .telIcon2{
    background: url(../../assets/telIcon2.png) 45px no-repeat;
    height: 49px;
    width: 400px;
    margin-top: -63px;
    margin-left: 485px;
    background-position: 0 0;
  }
  .el-footer .emailIcon{
    background: url(../../assets/emailIcon.png) 45px no-repeat;
    height: 49px;
    width: 400px;
    margin-top: -63px;
    margin-left: 855px;
    background-position: 0 0;
  }

</style>
